<template>
	<view>
		<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper-box">
			<swiper-item>
				<view class="swiper-item">
					<image
						src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage8.buy.ccb.com%2Fmerchant%2F201603%2F337910360%2F1587893325170_4.jpg&refer=http%3A%2F%2Fimage8.buy.ccb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628386777&t=7fba67c82824da2a583119d5543ed0b7"
						@click="change">
					</image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image
						src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.178hui.com%2Fupload%2F1920%2F2020%2F0503%2F17020626989.jpg&refer=http%3A%2F%2Fcdn.178hui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628386833&t=067622c96efad70eab317782f23ae0e9"
						@click="change"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 商品 简介 -->
		<view class="goods_body">
			<view class="goods_price">￥4299</view>
			<view class="goods_info_body">
				<view class="goods_name">小米(MI) 小米电视32GB超大屏幕64位四核处理器i7智能电视</view>
				<view class="goods_icon">
					<uni-icons type="star" size="18" color="gray"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<view class="goods_text">
				快递：免运费
			</view>
		</view>
		<image class="rich_img"
			src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fg.search.alicdn.com%2Fimg%2Fbao%2Fuploaded%2Fi4%2Fi2%2F2700934780%2FO1CN01wy1R6U1lBHmBtgJvQ_%21%212700934780.jpg&refer=http%3A%2F%2Fg.search.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628390791&t=183d5358ee5dc9a4a59997100a02f958"
			v-for="(item,index) in 4" :key="index"></image>

		<view class="goods_nav">
			<view class="shop_name">
				<u-icon name="home" size="38" color="gray"></u-icon>
				<text>店铺</text>
			</view>
			<view class="shop_car">
				<u-icon name="shopping-cart" size="40" color="gray"></u-icon>
				<text>购物车</text>

			</view>
			<view class="shop_button">
				<view class="button1">
					<text>加入购物车</text>
				</view>
				<view class="button2">
					<text>立即购买</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			change(){
				uni.navigateTo({
					url:'../shop_detail/shop_detail'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.swiper-box {
		width: 730rpx;
		height: 550rpx;
	}

	.goods_body {
		padding: 5px;
		padding-right: 0;

		.goods_price {
			font-size: 20px;
			color: #FA3534;
			margin-left: 5px;
		}

		.goods_info_body {
			display: flex;
			justify-content: space-between;

			.goods_name {
				font-size: 12px;
				font-weight: bold;
				padding: 5px 5px;
			}

			.goods_icon {
				display: flex;
				font-size: 12px;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-left: 1px solid #DCDFE6;
				width: 100px;

			}
		}

		.goods_text {
			font-size: 10px;
			margin: 5px;
			color: gray;
		}

		.rich_img {
			width: 730rpx;
			height: 550rpx;
			background: no-repeat;
		}
	}

	.goods_nav {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 450px;
		height: 50px;
		display: flex;
		background: #FFFFFF;


		.shop_name {
			display: flex;
			font-size: 11px;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 50px;
		}

		.shop_car {
			display: flex;
			font-size: 11px;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 50px;
			padding: 10px 0;
		}

		.shop_button {
			display: flex;
			width: 100%;
			flex-direction: row;
			margin: 5px;
			.button1{
				background: #FA3534;
				font-size: 12px;
				color: white;
				width: 110px;
				text-align: center;
				height:35px;
				padding: 10px;
				margin: 5px 0;
				border-radius:25px 0 0 25px;
			}
			.button2{
				background: #F29100;
				font-size: 12px;
				color: white;
				margin: 5px 0;
				width: 110px;
				text-align: center;
				height:35px;
				padding: 10px;
				border-radius:0 25px 25px 0;
			}
			
		}
	}
</style>
